<template>
  <div class="app-container">
    <div class="filter-container">
      <div  class="filter-item">
        <el-cascader placeholder="分类"
            v-model="selectClassifyId"
            :options="classifies"
            :props="{ expandTrigger: 'hover' ,value:'id',label:'name'}"
            @change="getBrandLst" ></el-cascader>
      </div>
      <el-button @click="addBrand" type="primary" class="filter-item">添加</el-button>
        <el-button @click="reload" type="danger" class="filter-item">刷新</el-button>
    </div>


    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      >
      <el-table-column prop="id" label="ID" min-width="80" />
      <el-table-column prop="get_classify.name" label="分类"  min-width="100"/>
      <el-table-column prop="name" label="品牌名称"  min-width="100"/>
      <el-table-column prop="created_at" label="创建时间"  min-width="160"/>
      <el-table-column fixed="right" label="操作" min-width="120">
        <template slot-scope="scope">
        <el-button size="mini" type="text"   @click="editBrand(scope.row.id)">编辑</el-button>
        <el-button size="mini" type="text"  v-if="scope.row.status==1"    @click="changeStatusBrand(scope.row.id,2)">禁用</el-button>
        <el-button size="mini" type="text"  v-else    @click="changeStatusBrand(scope.row.id,1)">启用</el-button>
      </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="isAdd?'添加':'编辑'" :visible.sync="dialogFormVisible">
      <el-form  :model="form" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
        <el-form-item  label="分类">
          <span>{{classifyName}}</span>
        </el-form-item>
        <el-form-item  label="品牌名称">
          <el-input  v-model="form.name"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { myGet, myPost } from '@/utils/myUtils';
const urlClassifyDetail = '/guard/shop/goods/classify/detail'
const urlBrandLst = '/guard/shop/goods/brand/lst'
const urlBrandAdd = '/guard/shop/goods/brand/add'
const urlBrandDetail = '/guard/shop/goods/brand/detail'
const urlBrandChangeStatus = '/guard/shop/goods/brand/changeStatus'

export default {

  data() {
    return {
      classifyProps:{value:'id',label:'value'},
      classifies:[],
      selectClassifyId:[],
      list:[],
      listLoading:true,
      isAdd:true,
      dialogFormVisible:false,
      classifyName:'',
      form:{
        classify_id:0,
        name:'',
        id:0
      },
    };
  },

  mounted() {
    this.getBrandLst()
  },

  methods: {
    onSubmit(){
      myPost(urlBrandAdd,this.form).then(res=>{
        if(res.status){
          this.dialogFormVisible = false
          this.$message.success(res.msg)
          this.getBrandLst()
        }
      })
    },
    addBrand(){
      if(this.selectClassifyId.length<=0){
        this.$message.error("亲，请先选择分类")
        return
      }
      const id = this.selectClassifyId[this.selectClassifyId.length-1]
      Object.assign(this.$data.form,this.$options.data().form)
      this.form.classify_id = id
      myGet(urlClassifyDetail,{id}).then(res=>{
        if(res.status){
          this.classifyName = res.data.records[0].name
          this.isAdd = true
          this.dialogFormVisible = true
        }
      })
    },

    editBrand(id){
      myGet(urlBrandDetail,{id}).then(res=>{
        if(res.status){
          const info = res.data.records[0]
          this.classifyName = info.get_classify.name,
          this.$set(this.form,'classify_id',info.classify_id)
          this.$set(this.form,'name',info.name)
          this.$set(this.form,'id',info.id)
          this.isAdd = false
          this.dialogFormVisible = true
        }
      })
    },

    changeStatusBrand(id,status){
      myGet(urlBrandChangeStatus,{id,status}).then(res=>{
        if(res.status){
          this.$message.success(res.msg)
          this.getBrandLst()
        }
      })
    },

    reload(){
      this.getRecords()
    },
    getRecords(){
      this.listLoading = true
      let params = {}
      if(this.selectClassifyId.length>0){
        params = {
          selectClassifyId:this.selectClassifyId[this.selectClassifyId.length-1]
        }
      }

      myGet(urlBrandLst,params).then(res=>{
        this.listLoading = false
        if(res.status){
          this.list = res.data.records
          this.classifies = res.data.classifies
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>

</style>
